<!DOCTYPE html>
<html class="pixel-ratio-2 retina android android-6 android-6-0">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <title>首页</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/mui.min.css">
    <link rel="stylesheet" href="assets/font/iconfont.css">
	<link rel="stylesheet" href="assets/mint-ui/style.css">
    <script src="assets/js/vue.min.js"></script>
    <script src="assets/js/mui.min.js"></script>
    <script src="assets/js/common.js"></script>
    <script src="UpGw/utils.js"></script>
    <script src="assets/js/Bluetooth.js"></script>
    <script src="assets/js/dataBase.js"></script>
	<script src="assets/mint-ui/index.js"></script>
</head>
	<body>
		<div id="H5_MUI">
			<template>
				<mt-datetime-picker ref="startPicker" type="datetime"  v-model="startDateValue" @confirm="getStartDate" > </mt-datetime-picker>
				<mt-datetime-picker ref="stopPicker" type="datetime"  v-model="stopDateValue" @confirm="getStopDate"> </mt-datetime-picker>
			
				<!-- 标题栏 -->
				<div class="navigation-bar">
					<div class="navigation-bar-title">线损计算</div>
					<div class="navigation-left">
						<div class="navigation-left-title" v-on:click="mui.back()"><li class="iconfont fs16">&#xe644;</li></div>
					</div>
					<div class="navigation-right">
						<div class="navigation-right-title"  >
							<i class="iconfont fs16">&#xe784;</i>
						</div>
					</div>
				</div>
				<!-- 标题 -->
				<div class="title-row">设置参数</div>
				<!-- 内容 -->
				<div class="content">
					<form class="mui-input-group fs14 ">
						<div class="mui-input-row">
							<label style="width: 30%;">计算间隔</label>
							<select class="mui-btn-block color9" style="width: 70%;font-size: 14px;" v-model="ValueTypeId">
								<option value="1">按日</option>
								<option value="2">按时间段</option>
							</select>
						</div>
						<div class="mui-input-row" v-on:click="openStartPicker()">
							<label style="width: 30%;">开始时间</label>
							<input type="text"  style="font-size: 12px;width:70%;float: left;text-align: left;" class="mui-input-clear"  v-model="startDate"  placeholder="2019-11-10 10:10">
						</div>
						<div class="mui-input-row" v-on:click="openStopPicker()">
							<label style="width: 30%;">结束时间</label>
							<input type="text"  style="font-size: 12px;width:70%;text-align: left;"  class="mui-input-clear" v-model="stopDate"  placeholder="2019-11-10 10:10">
						</div>
						
					</form>
				</div>
				<!-- 标题 -->
				<div class="title-row">线损数据</div>
				<div class="content" style="background-color: #FFFFFF;height: 100%;">
					<div class="title-cell" style="width: 100%;height: 30px;line-height: 30px;">
						<div class="title-cell-view" style="width: 20%;">线损时间</div>
						<div class="title-cell-view" style="width: 20%;">购电量</div>
						<div class="title-cell-view" style="width: 20%;">售电量</div>
						<div class="title-cell-view" style="width: 20%;">损失电量</div>
						<div class="title-cell-view" style="width: 20%;">损失率</div>
					</div>
				</div>
			</template>
		</div>
	</body>
</html>
<script>
	var vm = new Vue({
		el: '#H5_MUI',
		data: {
			selCollect:'000000000000',
			startDate:'',
			stopDate:'',
			startDateValue:'',
			stopDateValue:'',
			ValueTypeId:'1',
			
		},
		created: function () {
			var now = new Date(); //你已知的时间
			var dt = new DateUtil(now);
			this.startDate = dt.toStr('yyyy-MM-dd HH:mm');
			this.stopDate = dt.toStr('yyyy-MM-dd HH:mm');
		},
		methods: {
			openStartPicker:function() {
				this.startDateValue = new Date()
			    this.$refs.startPicker.open();
			},
			openStopPicker:function() {
				this.stopDateValue = new Date()
			    this.$refs.stopPicker.open();
			},
			getStartDate:function(){
				console.log(this.startDateValue);
				var dt = new DateUtil(this.startDateValue);
				this.startDate = dt.toStr('yyyy-MM-dd HH:mm');
			},
			getStopDate:function(){
				console.log(this.stopDateValue);
				var dt = new DateUtil(this.stopDateValue);
				this.stopDate = dt.toStr('yyyy-MM-dd HH:mm');
			}
		}
	})
	 
</script>
